<template>
    <q-page>
        <q-card>
            <q-item class='full-width q-pa-md'>
                <q-item-side class='accoutAvatar' :style="'background-image: url(https://open.weixin.qq.com/qr/code?username=' + accountid" />
                <q-item-main>
                    <q-item-tile label>
                        {{account.accountname}} {{account.accountid}}
                    </q-item-tile>
                    <div class="q-mt-sm">
                        <q-chip class="q-mr-xs" dense :color="account.dailyTotal > 100000 ? 'orange': ''" >
                            阅读：{{formatNumbers(account.dailyTotal)}}
                        </q-chip>
                        <q-chip class="q-mr-xs" dense>头条：{{formatNumbers(account.headReadAva)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>收藏：{{formatNumbers(account.favorAva)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>在看率：{{formatNumbers(account.likespercent)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>粉丝：{{formatNumbers(account.fanscount)}}</q-chip>
                    </div>
                </q-item-main>
                <!-- <q-item-side>
                    <q-toggle
                        v-model="showUnModified"
                        checked-icon="check"
                        color="green"
                        dense
                        @input="filterOnlyUnmodified"
                    />
                </q-item-side> -->
            </q-item>
            <q-item class="q-pa-none" v-if="accounttags.length">
                <q-collapsible class="q-pa-none" v-if='$q.platform.is.mobile'>
                    <template slot="header" class="q-pa-none">
                        <q-btn v-for="item in accounttags.slice(0,3)" :key="'key_'+item.key"
                            outline rounded size="xs" :label="item.key" class="q-mr-xs q-mb-xs">
                            <q-chip floating color="primary">{{item.count}}</q-chip>
                        </q-btn>
                    </template>
                    <div>
                        <q-btn v-for="item in accounttags.slice(3)" :key="'key_'+item.key"
                            outline rounded size="xs" :label="item.key" class="q-mr-xs q-mb-xs">
                            <q-chip floating color="primary">{{item.count}}</q-chip>
                        </q-btn>
                    </div>
                </q-collapsible>
                <div class="q-pl-md q-pr-md" v-else>
                    <q-btn v-for="item in accounttags" :key="'key_'+item.key"
                        outline rounded size="xs" :label="item.key" class="q-mr-xs q-mb-xs">
                        <q-chip floating color="primary">{{item.count}}</q-chip>
                    </q-btn>
                </div>
            </q-item>
        </q-card>

        <q-card>
          <q-search 
            icon="mdi-file-find" 
            class="full-width no-shadow" 
            inverted-light 
            color="grey-2"
            placeholder="可通过文章名、Tag搜索" 
            autofocus="true"
            clearable
            :value="filter"
            @input="filterResult" 
            @clear="filterResult('')" 
            @change="filterResult" 
        />
        </q-card>

        <q-infinite-scroll :handler="loadMoreArtical" ref="scroll">
            <q-list separator>
                <!-- <q-item 
                    v-for="(item,idx) in filteredArticals" 
                    :key="item.articalid + idx" 
                    :class="getItemClass(item)"
                > -->
                <artical-item 
                    v-for="(item,idx) in this.filteredArticals" 
                    :key="item.articalid + idx"
                    :item="item" 
                    :account="account"
                    position="account"/>
                    
            </q-list>
        </q-infinite-scroll>
    </q-page>
</template>

<script>
import ArticalItem from './ArticalItem.vue'

export default {
    name: "PageIndexOffical",
    components: { ArticalItem },
    data() {
        return {
            account: {},
            accountid: this.$route.params.id,
            articals: [],
            limit: 50,
            filter: '',
            showUnModified: false,
            accounttags: []
        }
    },
    mounted(){
        this.$api.ui.pageTitle = '文章列表'
        // this.loadModel(this.$route.params.id);
        this.$api.ui.pageBackBtn = () => {
            this.$router.push('/offical/accounts');
        }
        this.getCurrentAccount()
        this.$api.offical.loadAllTags()
    },
    methods: {
        getCurrentAccount(){
            this.$api.offical.loadAccountByCategory( data => {
                let localAccounts = [...data]
                let account = localAccounts.filter( item => {
                    return item.accountid === this.$route.params.id
                })
                if( account.length ) {
                    this.account = account[0]
                    // this.account.tags.map( item => {
                    //     let [ key, count ] = item.split('|')
                    //     if( !!key ){
                    //         this.accounttags.push({
                    //             key, count
                    //         })
                    //     }
                    // })
                    // console.log( 'accounttags:::', this.accounttags )
                    this.accounttags = [...this.account.formatTags]
                    this.accounttags.sort( (A, B) => {
                        return B.count > A.count ? 1 : -1
                    })
                }
            }) 
        },
        formatNumbers( num ){
          let number = '' + num
          let showStr = ''
          if( number > 99999 ){
              showStr = '10w+' 
          } else if ( number > 9999 && number < 100000  ){
              showStr = Math.floor(number /  10000) + 'w+'
          } else if ( number > 999 && number < 10000){
              showStr = Math.floor(number / 1000 ) + 'k+'
          } else {
              showStr = number
          }

          return showStr
        },
        loadMoreArtical(page, done){
            this.$api.offical.loadArticals( this.accountid, page, data => {
                this.articals.push( ...data )
                done( data.length < this.limit )
            })
        },
        filterResult( val ){
            console.log( val )
            this.filter = val
        },
        filterOnlyUnmodified( value ){
            console.log( value )
        },
        countLikePercent( item ){
            let articalLikePercent = Math.round(10000 * item.likeCount / item.clicksCount )
            return articalLikePercent
        },
        resortList( targetList ){
            let list = targetList.filter( item => {
                return !item.isDelete
            })
            let _topList = []
            let _bottomList = []
            list.map( item => {
                if( !!item.tags.join('').length ||
                    this.countLikePercent(item) < this.account.likespercent || 
                    item.clicksCount < 10000
                 ){
                     _bottomList.push( item )
                     _bottomList.sort( (itemA, itemB ) => {
                         return this.countLikePercent(itemB) - this.countLikePercent(itemA)
                     })
                 } else {
                     _topList.push( item )
                     _topList.sort( (itemA, itemB ) => {
                         return itemB.clicksCount - itemA.clicksCount
                     })
                 }
            })
            let _list = [..._topList, ..._bottomList]
            return _list
        }
    },
    computed: {
        filteredArticals() {
            let category = this.currentCategory
            let _list = [...this.articals]
            let query = this.filter.toLowerCase();
            if( !query.length ){
                return this.resortList( _list )
            }
            console.log( query )
            _list = this.articals.filter( item => {
                let { title, tags } = item
                if( title.indexOf( query ) > -1 || tags.join('').indexOf( query ) > -1 ){
                    return true
                }
                return false
            })
            console.log( _list )
            return this.resortList(_list)
        }
    }
}
</script>

<style>
.accoutAvatar{
    height: 40px;
    width: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 200px;
    border-radius: 40px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6 );
}
.tags_adder{
    display: inline-block;
}
.tags_adder div{
    display: inline-block;
}
.tags_adder div input{
    width: 50px!important;
}
</style>